<template>
  <div>
    <h2>点餐系统练习</h2>
    <h2>菜单列表：</h2>
    <ul>
      <li v-for="(item, index) in List" :key="'cd' + index">
        {{ item.name }} 价格 ￥{{ item.price }}
        <button @click="addList(item)">点餐</button>
      </li>
    </ul>
    <h2>已点菜单：</h2>
    <ul>
      <li v-for="(item, index) in underList" :key="'under' + index">
        {{ item.name }} 价格 ￥{{ item.price }}
        <button @click="deletList(index)">取消</button>
      </li>
    </ul>
    <h3>你一共点了 {{ underListlength }} 道菜，消费 {{ sum }} 元</h3>
  </div>
</template>

<script>
// 导入两个数字相加方法
import { computed, reactive, toRefs } from "vue";
import add from "../tools/add";
export default {
  setup() {
    // 把数组遍历到菜单
    const states = reactive({
      List: [
        {
          name: "鱼香肉丝",
          price: 12.88,
        },
        {
          name: "红烧肉",
          price: 11.88,
        },
        {
          name: "梅菜扣肉",
          price: 8.88,
        },
      ],
      underList: [],
      underListlength: 0,
      sum: computed(() => {
        let summ = 0;
        for (let a = 0; a < states.underList.length; a++) {
          summ += states.underList[a].price;
        }
        return summ.toFixed(2);
      }),

      addList(item) {
        console.log("你点的菜是", item);
        states.underList.push(item);
        states.underListlength = states.underList.length;
      },
      deletList(index) {
        // console.log(item)
        states.underList.splice(index,1)
      }
    });
    // const addList = (item)=>{
    //     console.log('你点的菜是',item)
    //     states.underList.push(item)
    //     states.underListlength = states.underList.length
    // }

    return {
      ...toRefs(states),
      // addList
    };
  },
};
</script>

<style>
</style>